<!DOCTYPE html>
<html>
    <head>
        <title>FM</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="shortcut icon" href="/avatar.png">
        <style>
            img.rotate{
                -webkit-animation:myRotate 10s linear infinite;
                animation:myRotate 10s linear infinite;
            }
            @-webkit-keyframes myRotate{
                0%{ -webkit-transform: rotate(0deg);}
                50%{ -webkit-transform: rotate(180deg);}
                100%{ -webkit-transform: rotate(360deg);}
            }
            @keyframes myRotate{
                0%{ -webkit-transform: rotate(0deg);}
                50%{ -webkit-transform: rotate(180deg);}
                100%{ -webkit-transform: rotate(360deg);}
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script
    </head>
    <body>
        <select id="regions"></select>
        <table><tbody></tbody></table>
        <div class="player"></div>
        <audio></audio>
        <script>
            document.addEventListener('DOMContentLoaded', (event) => {
                data = {};
                fetch('/data.json').then(rsp => rsp.json()).then(rsp => {
                    data = rsp;
                    let region = document.querySelector('#regions');
                    for(let id in data) {
                        let option = document.createElement('option');
                        option.setAttribute('value', id);
                        option.innerText = data[id]['title'];
                        region.appendChild(option);
                    }
                });
                document.querySelector('#regions').addEventListener('change', event => {
                    for (let id in data) {
                        if(id == event.target.value) {
                            rsp = data[id]['radios'];
                            let tbody = document.querySelector('table > tbody');
                            tbody.innerHTML = "";
                            for (r of rsp) {
                                let tr = document.createElement('tr');
                                let td = document.createElement('td');
                                td.innerHTML = `<img src=${r['imgUrl']} width="50px"></img>`;
                                tr.appendChild(td);
                                td = document.createElement('td');
                                td.innerText = r['title'];
                                tr.appendChild(td);
                                td = document.createElement('td');
                                td.innerText = r['desc'];
                                tr.appendChild(td);
                                tr.setAttribute('data-id', r['id']);
                                tr.addEventListener('click', event => { 
                                    var id = event.target.parentElement.getAttribute('data-id');
                                    var t = "/live/".concat(id, "/64k.mp3");
                                    var n = (Math.floor(Date.now() / 1000) + 60 * 60).toString(16);
                                    var r = encodeURIComponent("web");
                                    var i = encodeURIComponent(t);
                                    var a = "app_id=".concat(r, "&path=").concat(i, "&ts=").concat(n);
                                    var o = CryptoJS.HmacMD5(a, "Lwrpu$K5oP").toString();
                                    var url = "https://lhttp.qingting.fm".concat(t, "?app_id=").concat(r, "&ts=").concat(n, "&sign=").concat(encodeURIComponent(o));
                                    let audio = document.querySelector('audio');
                                    audio.src = url;
                                    audio.play();
                                    document.querySelectorAll('.rotate').forEach(o => o.removeAttribute('class'));
                                    event.target.parentElement.childNodes[0].childNodes[0].setAttribute('class', 'rotate');
                                });
                                tbody.appendChild(tr);
                            }
                        }
                    }
                });
            });
        </script>
    </body>
</html>